<template>
  <div class="mod-log">
    <h1 class="log-title">
      日志管理
      <Dropdown class="log-dropdown">
        <a href="javascript:void(0)">
          {{userInfo.username}} 2019年第1周(1.23-1.30)
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>昵称:{{userInfo.nickName}}</DropdownItem>
          <DropdownItem @click.native="showAdmin">账号信息</DropdownItem>
          <DropdownItem @click.native="showPassword">修改密码</DropdownItem>
          <DropdownItem divided @click.native="back">退出</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </h1>
    <div class="log-body">
      <Form ref="form" :model="form" :rules="rules">
        <h2 class="log-body__label">本周计划</h2>
        <FormItem prop="weekPlan">
          <Input v-model="form.currentPlan" type="textarea" />
        </FormItem>
        <h2 class="log-body__label">本周总结</h2>
        <FormItem prop="weekSummary">
          <Input v-model="form.summary" type="textarea" />
        </FormItem>
        <h2 class="log-body__label">下周计划</h2>
        <FormItem prop="nextWeekPlan">
          <Input v-model="form.nextPlan" type="textarea" />
        </FormItem>
        <FormItem class="log-operation">
          <Button style="margin-right:10px" @click="reset">清空</Button>
          <Button type="primary" @click="submit">确定</Button>
        </FormItem>
      </Form>
    </div>
    <div class="log-search">
      <DatePicker type="year" v-model="params.year" style="width: 100px;margin-right:10px;" @on-change="getWeek(params.year.getFullYear())"></DatePicker>
      <Select v-model="params.weekNum" style="width:100px" filterable>
        <Option v-for="(item,i) in weeks" :value="item.weekNum" :key="i">{{item.weekNum}}</Option>
      </Select>
      <Button type="primary" style="margin-left:10px" @click="getPlanData">查询</Button>
    </div>
    <AdminModal :row.sync="adminModal.row" :visible.sync="adminModal.visible" />
    <UpdatePassword :row.sync="updatePassword.row" :visible.sync="updatePassword.visible" />
  </div>
</template>

<script>
import * as RULE from "@/utils/validate";
import { removeToken } from "@/utils/auth";
import AdminModal from "./AdminModal/index";
import UpdatePassword from "./UpdatePassword/index";
export default {
  name: "Log",
  components: { AdminModal, UpdatePassword },
  data() {
    return {
      form: {
        currentPlan: "",
        summary: "",
        nextPlan: "",
        nickName: ""
      },
      userInfo: {
        nickName: ""
      },
      weeks: [], //获取的周数
      params: {
        year: "",
        weekNum: ""
      }, //   查询参数
      rules: {
        currentPlan: RULE.required("本周计划不能为空"),
        summary: RULE.required("本周总结不能为空")
      },
      adminModal: {
        visible: false,
        row: null
      },
      updatePassword: {
        visible: false,
        row: null
      }
    };
  },
  created() {
    this.getWeek(new Date().getFullYear());
    this.getUserInfo();
    this.getPlanData();
    this.params.year = new Date();
  },
  methods: {
    async submit() {
      var weekNum = this.params.weekNum;
      var year =
        this.params.year.getFullYear() == null
          ? null
          : this.params.year.getFullYear();
      const result = await this.$refs.form.validate();
      if (!result) return;
      this.loading = true;
      await this.$http({
        method: "post",
        url: this.API.PLAN_SAVE,
        data: { ...this.form, weekNum, year }
      });
      this.$Message.success("保存成功");
      setTimeout(() => {
        this.$router.push({ name: "Home" });
      }, 1100);
    },
    reset() {
      this.$refs.form.resetFields();
    },
    back() {
      removeToken();
      this.$router.push({ name: "Login" });
    },
    async getPlanData() {
      var weekNum = this.params.weekNum;
      var year =
        this.params.year.getFullYear() == null
          ? null
          : this.params.year.getFullYear();
      const { data } = await this.$http({
        method: "get",
        url: this.API.PLAN_FIND,
        params: { weekNum, year }
      });
      this.form = data.data;
      console.log(data.data.weekNum);
      this.params.weekNum = data.data.weekNum;
    },
    showAdmin() {
      this.adminModal.visible = true;
      this.adminModal.row = { ...this.userInfo };
    },
    async getUserInfo() {
      const { data } = await this.$http({
        method: "get",
        url: this.API.USER_FIND,
        params: {}
      });
      this.userInfo = data.data;
    },
    showPassword() {
      this.updatePassword.visible = true;
    },
    async getWeek(year) {
      try {
        const { data } = await this.$http({
          url: this.API.DATE_FIND,
          params: { year }
        });
        this.weeks = data.data;
      } catch (e) {
        this.weeks = [];
      }
    }
  }
};
</script>

<style lang="less">
.mod-log {
  position: relative;
}
.log-body {
  width: 600px;
  margin: 0 auto;
  .ivu-input {
    height: 80px;
    font-size: 12px;
  }
}
.log-title {
  position: relative;
  text-align: center;
  padding: 15px 0;
}
.log-dropdown {
  position: absolute;
  right: 20px;
  font-size: 12px;
}
.log-operation {
  margin: 10px 0;
  text-align: center;
}
.log-body__label {
  font-size: 16px;
  padding-left: 5px;
  border-left: 3px solid #2d8cf0;
  margin-bottom: 15px;
}
.log-search {
  position: absolute;
  top: 60px;
  left: 30px;
  width: 400px;
}
</style>
